<template>
  <vue-modal
    @submitData="saveRole"
    modalTitle="保存角色信息"
    modalName="saveRoleModal"
    modalWidth="750"
    ref="saveRoleModal">
    <div slot="content" class="form-box">
      <el-form ref="form" :model="form" label-width="80px">
        <div class="message-box">
          <h3 class="name-title">角色名称</h3>
          <span :class="showRoleNameTip? 'tip show-tip': 'tip'">长度不超过8个字符</span>
          <p class="role-name-star">*</p>
        </div>
        <el-input
          v-model="form.roleName"
          class="input-role-name"
          maxlength="8"
          @focus="focusInputRoleName"
          @blur="blurInputRoleName"></el-input>
        <div class="message-box">
          <h3 class="name-title">角色简介</h3>
          <span :class="showDescriptionTip? 'tip show-tip': 'tip'">长度不超过50个字符</span>
        </div>
        <el-input
          v-model="form.description"
          class="input-description"
          maxlength="50"
          @focus="focusInputDescription"
          @blur="blurInputDescription"></el-input>
        <div class="message-box">
          <h3 class="name-title">排序</h3>
          <span :class="showSortTip? 'tip show-tip': 'tip'">请输入1~99的整数，值越小优先级越高</span>
        </div>
        <el-input
          v-model="form.sort"
          class="input-sort"
          maxlength="2"
          @focus="focusInputSort"
          @blur="blurInputSort"></el-input>
      </el-form>
    </div>
  </vue-modal>
</template>

<script>

  import VueModal from 'components/common/modal/VueModal';

  import {insertRole, updateRole} from "../../../network/viewsRequest/role";

  export default {
    name: "SaveRoleTemplate",
    data() {
      return {
        form: {
          id: null,
          roleName: '',
          description: '',
          sort: null
        },
        showRoleNameTip: false,
        showDescriptionTip: false,
        showSortTip: false
      }
    },
    props: {
      roleDataFromParent: {
        type: Object,
        default: function() {
          return {}
        }
      }
    },
    components: {
      VueModal
    },
    watch: {
      roleDataFromParent: {
        deep: true,
        handler(val) {
          // 回显信息
          this.assignFormFromParent(val);
        }
      }
    },
    methods: {
      /**
       * 打开模态框
       */
      show() {
        // this.form = {};
        this.showRoleNameTip = false;
        this.showDescriptionTip = false;
        this.showSortTip = false;
        this.$refs.saveRoleModal.show();
      },
      /**
       * 关闭模态框
       */
      close() {
        this.$refs.saveRoleModal.closeModal();
      },
      /**
       * 角色名称输入框获取焦点时调用的方法，显示对应的提示信息
       */
      focusInputRoleName() {
        this.showRoleNameTip = true;
      },
      /**
       * 角色名称输入框失去焦点时调用的方法，隐藏对应的提示信息
       */
      blurInputRoleName() {
        this.showRoleNameTip = false;
      },
      /**
       * 角色简介输入框获取焦点时调用的方法，显示对应的提示信息
       */
      focusInputDescription() {
        this.showDescriptionTip = true;
      },
      /**
       * 角色简介输入框失去焦点时调用的方法，隐藏对应的提示信息
       */
      blurInputDescription() {
        this.showDescriptionTip = false;
      },
      /**
       * 排序输入框获取焦点时调用的方法，显示对应的提示信息
       */
      focusInputSort() {
        this.showSortTip = true;
      },
      /**
       * 排序输入框失去焦点时调用的方法，隐藏对应的提示信息
       */
      blurInputSort() {
        this.showSortTip = false;
      },
      /**
       * 保存角色信息
       */
      saveRole() {
        // 1.校验数据

        // 2.选择方法
        let func = null;
        if (this.form.id) {
          func = updateRole;
        } else {
          func = insertRole;
        }
        // 3.进行保存
        this.$confirm("是否要进行保存？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          func(this.form).then(res => {
            // console.log(res);
            if (res.code == 1) {
              this.$message.success("保存成功！");
              this.close();
              this.$emit("reloadTable");
            } else {
              this.$message.error(res.message);
            }
          })
        }).catch(() => {
          this.$message.info("保存操作已经被取消");
        })
      },
      /**
       * 编辑角色前的回显角色信息
       */
      assignFormFromParent(role) {
        this.form.id = role.id;
        this.form.roleName = this.$set(this.form, "roleName", role.roleName);
        this.form.description = this.$set(this.form, "description", role.description);
        this.form.sort = this.$set(this.form, "sort", role.sort);
      }

    },
    mounted() {

    }
  }
</script>

<style scoped>

  .form-box {
    padding-left: 100px;
    position: relative;
  }
  .form-box p {
    position: absolute;

    color: #F56C6C;
  }

  .role-name-star {
    top: 0px;
    left: 178px;
  }

  .input-role-name,.input-description,.input-sort {
    width: 500px;
    margin-bottom: 20px;
  }
  h3 {
    display: inline-block;
    margin-bottom: 10px;
  }
  .tip {
    margin-left: 20px;
    color: #F56C6C;
    visibility: hidden;
  }
  .show-tip {
    visibility: visible !important;
  }
</style>